<template>
  <div>
       <div class="divone">收入趋势</div>
   
    <div id="trend" class="disContainer">
        
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      this.$nextTick(() => {
        this.echart = echarts.init(document.getElementById("trend"));
        this.echart.setOption(this.option());
      });
    },
    option() {
      let option = {
        xAxis: {
          type: "category",
          data: [
            "2021-3",
            "2021-4",
            "2021-5",
            "2021-6",
            "2021-7",
            "2021-8",
            "2021-9",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang='stylus' scoped>
.disContainer {
  width: 670px;
  height: 400px;
  background-color: white;

  margin-top: 10px;
  border-radius: 5px;
  position: absolute;
  right: 0;
}
.divone{
    position: absolute;
    top: 150px;
}
</style>